<template>
  <div class="fourbox">
    <div class="index_part_title">
      <span> <i class="el-icon-s-custom"></i>订单趋势分析</span>
      <i class="el-icon-refresh refresh" @click="refresh"></i>
    </div>
    <div class="index_four" @click="$router.push('/index/order')">
      <div style="width: 100%; height: 100%" id="indexfour"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },

  components: {},
  methods: {
    refresh() {
      this.$bus.$emit("refresh", "order");
    },
    get_count() {
      console.log(this.data);
      var dataIPSxAxis = this.data.date;
      var all_count = this.data.all_count;
      var all_sum = this.data.all_sum;
      var option = {
        // title: {
        //     text: "水量变化",
        //     subtext: "数量",
        //     textStyle: {
        //         color: "#fff"
        //     }
        // },
        backgroundColor: "#ffffff",
        tooltip: {
          trigger: "axis",
          //   axisPointer: {
          //     type: "cross",
          //     label: {
          //       backgroundColor: "#6a7985"
          //     }
          //   }
        },
        color: ["#e76e67", "#5ca3ff"],
        toolbox: {},
        grid: {
          left: "5%",
          right: "6%",
          top: "10%",
          bottom: "20%",
          containLabel: false,
        },
        legend: {
          color: ["#f3545d", "#fdaf4b"],
          data: ["订单数量", "订单金额"],
          bottom: "5%",
          textStyle: {
            color: "#8d949a",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: dataIPSxAxis,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#7f7f7f",
                fontSize: 12,
              },
              // formatter: function (value) {
              //     //debugger
              //     var ret = ""; //拼接加\n返回的类目项
              //     var maxLength = 5; //每项显示文字个数
              //     var valLength = value.length; //X轴类目项的文字个数
              //     var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
              //     if (rowN > 1) {
              //         //如果类目项的文字大于3,
              //         for (var i = 0; i < rowN; i++) {
              //             var temp = ""; //每次截取的字符串
              //             var start = i * maxLength; //开始截取的位置
              //             var end = start + maxLength; //结束截取的位置
              //             //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              //             temp = value.substring(start, end) + "\n";
              //             ret += temp; //凭借最终的字符串
              //         }
              //         return ret;
              //     } else {
              //         return value;
              //     }
              // }
            },
            axisLine: {
              lineStyle: {
                color: "#7f7f7f",
                width: 0.5, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            name: "订单数量",
            type: "value",
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#7f7f7f",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              formatter: function (val) {
                return val + "";
              },
              show: true,
              textStyle: {
                color: "#7f7f7f", //字体颜色
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          {
            name: "订单金额",
            type: "value",
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#7f7f7f",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              formatter: function (val) {
                return val + "";
              },
              show: true,
              textStyle: {
                color: "#7f7f7f", //字体颜色
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "订单数量",
            type: "line",
            smooth: true,
            //  symbol: "none", //去掉折线点
            stack: 100,
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#CB8993", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "#CB8993", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#CC56CB", // 100% 处的颜色
                  },
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: "solid",
                  color: "#CC56CB",
                },
              },
              emphasis: {
                color: "#02675f",
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: "dotted",
                  color: "#02675f", //折线的颜色
                },
              },
            }, //线条样式
            symbolSize: 5, //折线点的大小
            areaStyle: {
              normal: {},
            },
            data: all_count,
          },

          {
            name: "订单金额",
            type: "line",
            smooth: true,
            //  symbol: "none", //去掉折线点
            stack: 100,
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#64CAFA", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "#64CAFA", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0078D7", // 100% 处的颜色
                  },
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: "solid",
                  color: "#0078D7",
                },
              },
              emphasis: {
                color: "#02675f",
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: "dotted",
                  color: "#02675f", //折线的颜色
                },
              },
            }, //线条样式
            symbolSize: 5, //折线点的大小
            areaStyle: {
              normal: {},
            },
            yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
            data: all_sum,
          },
        ],
      };

      var myChart = this.$echarts.init(document.getElementById("indexfour"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.fourbox {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 5px 20px #e4e4e4;
}

.index_four {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
